<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>${serverName}</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.4.0.0.css"/>
    <script src="../js/lib/vue.js"></script>
    <script src="../js/lib/iview.min.js"></script>
</head>
<body>
<div id="app" class="container-fluid">
    <div class="row" v-if="properties">
        <properties-view :properties="properties" />
    </div>
    <div class="row" v-if="methods">
        <methods-view :methods="methods" />
    </div>
</div>

<script type="text/x-template" id="properties-view-tpl">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3>Property View</h3>
        </div>
        <table class="table table-bordered table-condensed table-striped table-hover">
            <thead>
                <tr><th>Name</th><th>Value</th><th>Type</th></tr>
            </thead>
            <tbody>
            <tr v-for="prop in properties">
                <td>
                    <ul v-if="prop.annotations" class="list-unstyled">
                        <li v-for="mark in prop.annotations">
                            <i>{{mark}}</i>
                        </li>
                    </ul>
                    {{prop.name}}
                </td>
                <td>
                    {{prop.value}}
                </td>
                <td>{{prop.type}}</td>
            </tr>
            </tbody>
            <tfoot>
                <tr><td><total :total="properties.length"/></td></tr>
            </tfoot>
        </table>
    </div>
</script>

<script type="text/x-template" id="methods-view-tpl">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3>Method View</h3>
        </div>
        <table class="table table-bordered table-condensed table-striped table-hover">
            <thead>
                <tr><th>Name</th><th>ReturnType</th><th>操作</th><th>调用返回</th></tr>
            </thead>
            <tbody>
            <tr v-for="m in methods">
                <td>
                    <ul v-if="m.annotations" class="list-unstyled">
                        <li v-for="mark in m.annotations">
                            <i>{{mark}}</i>
                        </li>
                    </ul>
                    {{m.name}}
                </td>
                <td>
                    {{m.returnType}}
                </td>
                <td><button @click="invoke(m)" class="btn">调用</button></td>
                <td>{{m.invokeReturn}}</td>
            </tr>
            </tbody>
            <tfoot>
                <tr><td><total :total="methods.length"/></td></tr>
            </tfoot>
        </table>
    </div>
</script>

<script>
    var state = {
        rootPath: "${rootPath}",
        _this: "${_this}",
        properties: ${properties},
        methods: ${methods}
    };
    Vue.component('total', {
        props: ['total'],
        template: '<span>Total: {{total}}</span>'
    });
    Vue.component('properties-view', {
        props: ['properties'],
        template: '#properties-view-tpl'
    });
    Vue.component('methods-view', {
        props: ['methods'],
        template: '#methods-view-tpl',
        methods: {
            invoke: function (m) {
                m.invokeReturn = "xxxxxxxxx";
                console.log(m);
            }
        }
    });
    var app = new Vue({
        el: '#app',
        data: state,
    });
</script>
</body>
</html>